<!DOCTYPE html>
<html>
<head>
	<title>pctx.html</title>
	<meta charset="utf-8"/>
	<script src="./bower_components/react/react.js"></script>
	<script src="./bower_components/react/react-dom.js"></script>
	<script src="./bower_components/babel/browser.js"></script>

	<style>
		

	</style>
</head>
<body>
	<div id='app'></div>

	<script type="text/babel">

		// function show(wd, min, max) {
		// 	if (Number(wd) <= Number(min)) return <div>水结冰了</div>
		// 	else if (Number(wd) >= Number(max)) return <div>水烧开了</div> 
		// 	else return <div>烧水中</div>
		// }

		class Show extends React.Component {
			constructor() {
				super();
				this.state = {
					msg: ''
				}
			}

			componentWillMount() {
				this.state.msg = this.show(this.props.wd, this.props.min, this.props.max)
			}

			componentDidUpdate() {
				// console.log(this.props.wd)
				this.state.msg = this.show(this.props.wd, this.props.min, this.props.max)
			}

			render() {
				return (
					<div>
						{this.state.msg}
					</div>
				)
			}

			show(wd, min, max) {
				console.log(wd, min, max);
				if (Number(wd) <= Number(min)) return <div>水结冰了</div>
				else if (Number(wd) >= Number(max)) return <div>水烧开了</div> 
				else return <div>烧水中</div>
			}
		}

		class Water extends React.Component {
			constructor() {
				super();
				this.state = {
					wd: 10
				}
			}

			render() {
				return (
					<div>
						<input type="number" onChange={this.change.bind(this)} defaultValue={this.state.wd} />
						<Show wd={this.state.wd} min={this.props.min} max={this.props.max} />
					</div>
				)			
			}

			change(e) {
				this.setState({
					wd:e.target.value
				})
			}
		}

		ReactDOM.render(<Water min='0' max='100' />, app);
	</script>

</body>
</html> 